<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>壁纸分类</title>
    <link rel="stylesheet" href="../style/imgSort.css" />
  </head>
  <body>
    <div class="content">
      <!-- 侧边导航栏 -->
      <div class="leftNav">
        <!-- logo 加标题 -->
        <div class="leftNav-title">
          <img src="../static/img/logo/画板 1.png" alt="" />
          <span class="leftNav-title-text">即时视频</span>
        </div>
        <!-- 左侧导航栏 -->
        <div class="leftNav-list">
          <ul>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-icon_shouyetuijian"></i>
                <span>首页推荐</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-lishijilu_huaban"></i>
                <span>观看历史</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-dianying"></i>
                <span>电影</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-shu"></i>
                <span>小说</span>
              </a>
            </li>
            <li class="leftNav-item active">
              <a href="#">
                <i class="iconfont icon-bizhi"></i>
                <span>壁纸</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-youxi"></i>
                <span>游戏</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-keji"></i>
                <span>科技</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-meishi"></i>
                <span>美食</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-vlog"></i>
                <span>VLOG</span>
              </a>
            </li>

            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-dongman"></i>
                <span>动漫</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-gaoxiaolei"></i>
                <span>搞笑</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-chongwu"></i>
                <span>宠物</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-lvyou"></i>
                <span>旅游</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-xiuxianyule"></i>
                <span>娱乐</span>
              </a>
            </li>
            <li class="leftNav-item">
              <a href="#">
                <i class="iconfont icon-lanqiu"></i>
                <span>体育</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="rightContent">
        <!-- 右侧顶部导航栏 -->
        <div class="rightTopNav">
          <div class="TopSearch">
            <input type="text" placeholder="南航开通海口往返青岛" />
            <div class="SerchBtn">
              <img src="../static/img/搜索.png" alt="" />
              <span>搜索</span>
            </div>
          </div>
          <div class="TopNav">
            <ul>
              <li>
                <a href="#">
                  <img src="../static/img/钻石.png" alt="" />
                  <span>会员</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="../static/img/收藏文件.png" alt="" />
                  <span>收藏</span>
                </a>
              </li>
              <li class="userName">
                <a href="#">
                  <svg
                    t="1717161226654"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="5473"
                    width="128"
                    height="128"
                  >
                    <path
                      d="M502.496 63.136c125.888 0 227.936 100.384 227.936 224.192 0 123.84-102.048 224.224-227.936 224.224-125.888 0-227.936-100.384-227.936-224.224C274.56 163.488 376.64 63.136 502.496 63.136L502.496 63.136zM502.496 63.136c125.888 0 227.936 100.384 227.936 224.192 0 123.84-102.048 224.224-227.936 224.224-125.888 0-227.936-100.384-227.936-224.224C274.56 163.488 376.64 63.136 502.496 63.136L502.496 63.136zM417.024 586.304l189.984 0c162.624 0 294.432 129.632 294.432 289.6l0 18.656c0 63.04-131.84 65.44-294.432 65.44l-189.984 0c-162.624 0-294.432-0.096-294.432-65.44l0-18.656C122.592 715.936 254.4 586.304 417.024 586.304L417.024 586.304zM417.024 586.304"
                      fill="#272636"
                      p-id="5474"
                    ></path>
                  </svg>
                  <span>admin</span>
                </a>
              </li>
            </ul>
            <!-- 登录按钮 -->
            <a href="#" class="loginBtn"> 登录 </a>
          </div>
        </div>

        <!-- 分类导航栏 -->
        <div class="classifyNav">
          <ul class="classifyList">
            <li class="classifyItem active">明星美女</li>
            <li class="classifyItem">帅哥靓仔</li>
            <li class="classifyItem">可爱萌宠</li>
            <li class="classifyItem">AI美图</li>
            <li class="classifyItem">平铺卡通</li>
            <li class="classifyItem">自然风光</li>
            <li class="classifyItem">创意色彩</li>
          </ul>
        </div>

        <!-- 图片列表 -->
        <div class="imgListContent">
          <ul class="imgList">
            <li class="imgItem">
              <img
                src="https://cdn.qingnian8.com/public/xxmBizhi/20240409/1712648282492_8.jpg"
                alt=""
              />
              <div class="imgDesc"></div>
            </li>
            <li class="imgItem">
              <img
                src="https://cdn.qingnian8.com/public/xxmBizhi/20240409/1712648282492_8.jpg"
                alt=""
              />
            </li>
            <li class="imgItem">
              <img
                src="https://cdn.qingnian8.com/public/xxmBizhi/20240409/1712648282492_8.jpg"
                alt=""
              />
            </li>
            <li class="imgItem">
              <img
                src="https://cdn.qingnian8.com/public/xxmBizhi/20240409/1712648282492_8.jpg"
                alt=""
              />
            </li>
          </ul>
        </div>

        <!-- 分页器 -->
        <div class="paging">
          <div class="pagingHome">首页</div>
          <div class="pagingList">
            <ul>
              <li class="pagingItem active">1</li>
              <li class="pagingItem">2</li>
              <li class="pagingItem">3</li>
              <li class="pagingItem">4</li>
              <li class="pagingItem">5</li>
              <li class="pagingItem">6</li>
              <li class="pagingItem">7</li>
            </ul>
          </div>
          <div class="pagingEnd">尾页</div>
        </div>

        <!-- 底部 -->
        <div class="footer">
          <div class="footerLeft">
            <div class="footerTop">友情连接</div>
            <ul class="footerList">
              <li class="footerItem">
                <a href="#">即时网</a>
              </li>
              <li class="footerItem">
                <a href="#">即时影视模板</a>
              </li>
              <li class="footerItem">
                <a href="#">即时主题设计</a>
              </li>
              <li class="footerItem">
                <a href="#">大虾壁纸</a>
              </li>
            </ul>
          </div>
          <div class="footerRight">
            <div class="footerTop">合作联系</div>
            <ul class="footerList">
              <li class="footerItem">
                <a href="#">QQ: 2336558626</a>
              </li>
              <li class="footerItem">
                <a href="#">邮箱: 2336558626qq.com</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 商标 -->
        <div class="trademark">© 2023 JISHI - All Rights Reserved</div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../js/imgSort.js"></script>
    <script src="../js/Route.js"></script>
  </body>
</html>
